<div id="getstarted" ng-controller="GetStartedCtrl">
	<div id='page-title' ng-style="{width:titleWidth()}">{{localize('Nav Pane', 'Get Started')}}</div>
	<div id='menu' ng-style="{height: contentHeight()}">
		<ul>
			<li ng-click="newDocument()">
				<a ng-mouseover="previewCommand(newDocumentPreview)"
                   ng-mouseleave="previewCommand(null)">
                   {{localize('Get Started', 'New Document')}}
				</a>
			</li>

			<li ng-click="newFromTemplate()" class="hidden-{{!newFromTemplateAvailable}}">
				<a ng-mouseover="previewCommand(newFromTemplatePreview)"
                   ng-mouseleave="previewCommand(null)">
				   {{localize('Get Started', 'New From Template')}}
				</a>
			</li>

			<li ng-click="newFromClipboard()" class="hidden-{{!newFromClipboardAvailable}} enabled-{{newFromClipboardEnabled}}">
				<a ng-mouseover="previewCommand(newFromClipboardPreview)"
                   ng-mouseleave="previewCommand(null)">
				   {{localize('Get Started', 'New From Clipboard')}}
				</a>
			</li>

			<li ng-click="acquireImage()" class="hidden-{{!acquireImageAvailable}} enabled-{{acquireImageEnabled}}">
				<a ng-mouseover="previewCommand(acquireImagePreview)"
                   ng-mouseleave="previewCommand(null)">
				   {{localize('Get Started', 'Acquire An Image')}}
				</a>
			</li>

			<li class="enabled-{{recentfiles.length>0}}">
				{{localize('Get Started', 'Open Recent')}}
				<ul>
					<li ng-repeat="file in recentfiles" class='nowrap-ellipses'>
						<a ng-click="openRecent(file)" 
						   ng-mouseover="previewRecent(file)"
						   ng-mouseleave="previewRecent(null)">
							{{file.docname}}
						</a>
					</li>
				</ul>
			</li>

			<li ng-click="openOther()" class='external-link'>
				<a ng-mouseover="previewCommand(openOtherPreview)"
                   ng-mouseleave="previewCommand(null)">
				   {{localize('Get Started', 'Open Other...')}}
				</a>
			</li>
		</ul>
	</div>

	<div class='preview'>
		<div class='hidden-{{preview == null}}'>
			<img ng-src='{{preview.previewpath}}' style='clear:both'/>
			<div class="nowrap-ellipses">{{preview.docname}}</div>
			<div class="nowrap-ellipses">{{preview.date}}</div>
			<div class="nowrap-ellipses">{{preview.docfolder}}</div>
			<div class="nowrap-ellipses">{{friendlySize(preview)}}</div>
		</div>
	</div>

	<div id="content" ng-style="{left: contentLeft, width: contentWidth(), height: contentHeight()}">
    	<div class='hidden-{{previewImg == null}}'>
			<img ng-src='{{previewImg}}' ng-style="{left: contentLeft, 'max-width': contentWidth()-30,'max-height': contentHeight()-60}"/>
		</div>
    	<div class='hidden-{{previewText == null}}'>
			<div>{{localize('Get Started', previewText)}}</div>
		</div>
	</div>
</div>